<template>
	<view class="history">
		<view class="list" v-for="item in list" :key="item.id" @click="goArticle(item.id)">
			<view class="text">
				<view class="u_text">{{ item.title }}</view>
				<view class="l_text">{{ item.date }}</view>
			</view>
			<view class="img">
				<image :src="item.imgUrl"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	export default {
		data() {
			return {
				list: [
					{
						id: 23,
						title: '四月新番导视',
						imgUrl: '../../static/images/banner2.webp',
						content: '四月新番导视四月新番导视四月新番导视四月新番导视四月新番导视四月新番导视四月新番导视四月新番导视四月新番导视四月新番导视四月新番导视四月新番导视四月新番导视四月新番导视四月新番导视四月新番导视四月新番导视',
						date: '2022-4-5 08:00'
					},
					{
						id: 18,
						title: '虎年剧好看',
						imgUrl: '../../static/images/banner1.webp',
						content: '<p>“想快乐，就看开心麻花”在央视春晚上再次得到了认证：开心麻花的小品《还不还》带给了全国观众别样欢笑，在网络上好评如潮。春节假期结束后，生活、工作又重新开展。新的一年，开心麻花将继续陪伴大家，成为生活枯燥时的调和剂，制造更多开心时刻——久演不衰的人气佳作、电影加持的经典剧目、独特创新的Top级作品……多部人气作品将轮番登场，为羊城市民带来喜剧盛宴。</p>',
						date: '2022/4/9 08:00'
					}
				]
			}
		},
		computed: mapState(['isLogin','userInfo']),
		methods: {
			goArticle(id) {
				uni.navigateTo({
					url: '../com-detail/com-detail?id='+id+'&userInfo='+JSON.stringify(this.userInfo)
				})
			},
		}
	}
</script>

<style lang="scss">
	.list{
		width: 750rpx;
		height: 200rpx;
		display: flex;
		margin-top: 5px;
		border-bottom: 1px solid #eaeaea;
		.text{
			width: 480rpx;
			float: left;
			.u_text{
				margin: 10px 5px 10px;
			}
			.l_text{
				margin-left: 5px;
			}
		}
		.img{
			width: 120rpx;
			float: right;
			margin: 5px 5px;
			image{
				width: 120px;
				height: 80px;
				border-radius: 5px;
			}
		}
	}
</style>
